@charset "UTF-8";

// ==========================================================================
// Wee – Grid
// ==========================================================================

.row::after {
  clear: both;
  content: "";
  display: table;
}

.row {
  position: relative;
  @include margin-all(null, -$base-gap, null, -$base-gap);
}

.gird-md {
  width:$screen-md;
}
.gird-hd {
  width:$screen-hd;
}

// Mobile Container
.container {
  @include padding-all(null, $base-gap, null, $base-gap);
  @include center-block;
}
.container-full {
  @include padding-all(null, 0, null, 0);
  @include center-block;
}

// Tablet Container
@include min-screen($breakpoint-sm) {
  .container, .container-full {
    width: $screen-sm;
  }
  .container-sm {
    width: $screen-sm;
    @include padding-all(null, $base-gap, null, $base-gap);
    @include center-block;
  }
  .container-full-sm {
    width: $screen-sm;
    @include padding-all(null, 0, null, 0);
    @include center-block;
  }
}

// Desktop Container
@include min-screen($breakpoint-md) {
  .container, .container-full {
    width: $screen-md;
  }
  .container-md {
    width: $screen-md;
    @include padding-all(null, $base-gap, null, $base-gap);
    @include center-block;
  }
  .container-full-md {
    width: $screen-md;
    @include padding-all(null, 0, null, 0);
    @include center-block;
  }
}

// HD Container
@include min-screen($breakpoint-hd) {
  .container, .container-full {
    width: $screen-hd;
  }
  .container-hd {
    width: $screen-hd;
    @include padding-all(null, $base-gap, null, $base-gap);
    @include center-block;
  }
  .container-full-hd {
    width: $screen-hd;
    @include padding-all(null, 0, null, 0);
    @include center-block;
  }
}

// Mobile Columns
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  @include padding-all(null, $base-gap, null, $base-gap);
  position: relative;
  float: left;
}

// Mobile  Grid
$columns: 12;
@for $i from 1 through $columns {
  .col-#{$i} {
    width: ($i / $columns) * 100%;
  }
}

// Mobile Push Offsets
@for $i from 1 through $columns - 1 {
  .push-#{$i} {
    left: ($i / $columns) * 100%;
  }
}

// Mobile Pull Offsets
@for $i from 1 through $columns - 1 {
  .pull-#{$i} {
    left: -($i / $columns) * 100%;
  }
}

// Tablet Grid
@include min-screen($breakpoint-sm) {
  // Tablet Grid Columns
  .col-1-sm,
  .col-2-sm,
  .col-3-sm,
  .col-4-sm,
  .col-5-sm,
  .col-6-sm,
  .col-7-sm,
  .col-8-sm,
  .col-9-sm,
  .col-10-sm,
  .col-11-sm,
  .col-12-sm {
    @include padding-all(null, $base-gap, null, $base-gap);
    position: relative;
    float: left;
  }

  // Tablet Grid
  $columns: 12;
  @for $i from 1 through $columns {
    .col-#{$i}-sm {
      width: ($i / $columns) * 100%;
    }
  }

  // Tablet Push Offsets
  @for $i from 1 through $columns - 1 {
    .push-#{$i}-sm {
      left: ($i / $columns) * 100%;
    }
  }

  // Tablet Pull Offsets
  @for $i from 1 through $columns - 1 {
    .pull-#{$i}-sm {
      left: -($i / $columns) * 100%;
    }
  }
}

// Desktop Grid
@include min-screen($breakpoint-md) {

  // Desktop Grid Columns
  .col-1-md,
  .col-2-md,
  .col-3-md,
  .col-4-md,
  .col-5-md,
  .col-6-md,
  .col-7-md,
  .col-8-md,
  .col-9-md,
  .col-10-md,
  .col-11-md,
  .col-12-md {
    @include padding-all(null, $base-gap, null, $base-gap);
    position: relative;
    float: left;
  }

  // Desktop Grid
  $columns: 12;
  @for $i from 1 through $columns {
    .col-#{$i}-md {
      width: ($i / $columns) * 100%;
    }
  }

  // Desktop Push Offsets
  @for $i from 1 through $columns - 1 {
    .push-#{$i}-md {
      left: ($i / $columns) * 100%;
    }
  }

  // Desktop Pull Offsets
  @for $i from 1 through $columns - 1 {
    .pull-#{$i}-md {
      left: -($i / $columns) * 100%;
    }
  }
}

// HD Grid
@include min-screen($breakpoint-hd) {

  // HD Grid Columns
  .col-1-hd,
  .col-2-hd,
  .col-3-hd,
  .col-4-hd,
  .col-5-hd,
  .col-6-hd,
  .col-7-hd,
  .col-8-hd,
  .col-9-hd,
  .col-10-hd,
  .col-11-hd,
  .col-12-hd {
    @include padding-all(null, $base-gap, null, $base-gap);
    position: relative;
    float: left;
  }

  // HD Grid
  $columns: 12;
  @for $i from 1 through $columns {
    .col-#{$i}-hd {
      width: ($i / $columns) * 100%;
    }
  }

  // HD Push Offsets
  @for $i from 1 through $columns - 1 {
    .push-#{$i}-hd {
      left: ($i / $columns) * 100%;
    }
  }

  // HD Pull Offsets
  @for $i from 1 through $columns - 1 {
    .pull-#{$i}-hd {
      left: -($i / $columns) * 100%;
    }
  }
}
